<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目总览 - 开发部项目管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .header {
            background: #4a90e2;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .header h1 {
            font-size: 20px;
            font-weight: bold;
        }

        .user-info {
            background: rgba(255,255,255,0.2);
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .user-info:hover {
            background: rgba(255,255,255,0.3);
        }

        .container {
            display: flex;
            min-height: calc(100vh - 60px);
        }

        .sidebar {
            width: 250px;
            background: white;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            padding: 20px 0;
        }

        .nav-item {
            padding: 15px 25px;
            cursor: pointer;
            transition: background-color 0.3s;
            border-left: 4px solid transparent;
        }

        .nav-item:hover {
            background-color: #f8f9fa;
        }

        .nav-item.active {
            background-color: #e3f2fd;
            border-left-color: #4a90e2;
            color: #4a90e2;
        }

        .nav-item.sub-item {
            padding-left: 45px;
            font-size: 14px;
            background-color: #f8f9fa;
        }

        .main-content {
            flex: 1;
            padding: 20px;
        }

        .content-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .search-filters {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .search-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .search-group label {
            font-size: 12px;
            color: #666;
            font-weight: 500;
        }

        .search-group input,
        .search-group select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            min-width: 150px;
        }

        .search-group input:focus,
        .search-group select:focus {
            outline: none;
            border-color: #4a90e2;
        }

        .project-table {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .table-header {
            background: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #dee2e6;
            font-weight: bold;
            color: #495057;
        }

        .table-content {
            max-height: 500px;
            overflow-y: auto;
        }

        .table-row {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 2fr;
            gap: 20px;
            padding: 15px 20px;
            border-bottom: 1px solid #dee2e6;
            align-items: center;
        }

        .table-row:hover {
            background-color: #f8f9fa;
        }

        .table-row:last-child {
            border-bottom: none;
        }

        .project-name {
            font-weight: 500;
            color: #4a90e2;
            cursor: pointer;
        }

        .project-name:hover {
            text-decoration: underline;
        }

        .project-name.restricted {
            color: #6c757d;
            cursor: default;
        }

        .project-name.restricted:hover {
            text-decoration: none;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background-color: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #28a745, #20c997);
            transition: width 0.3s ease;
        }

        .progress-text {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }

        .git-link {
            color: #4a90e2;
            text-decoration: none;
            font-size: 14px;
            word-break: break-all;
        }

        .git-link:hover {
            text-decoration: underline;
        }

        .no-data {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .logout-btn {
            background: #dc3545;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
            transition: background-color 0.3s;
        }

        .logout-btn:hover {
            background: #c82333;
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                order: 2;
            }
            
            .search-filters {
                flex-direction: column;
            }
            
            .table-row {
                grid-template-columns: 1fr;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>开发部项目管理</h1>
        <div style="display: flex; align-items: center;">
            <span class="user-info" id="userInfo">个人信息</span>
            <button class="logout-btn" onclick="logout()">退出登录</button>
        </div>
    </div>

    <div class="container">
        <div class="sidebar">
            <div class="nav-item active" onclick="showProjectOverview()">
                项目总览
            </div>
            <div class="nav-item" onclick="showProjectDetails()">
                项目详情
            </div>
            <div class="nav-item sub-item" onclick="showBasicInfo()">
                基本信息
            </div>
            <div class="nav-item sub-item" onclick="showDocumentList()">
                文档列表
            </div>
            <div class="nav-item sub-item" onclick="showMemberInfo()">
                成员信息
            </div>
            <div class="nav-item sub-item" onclick="showProgressTracking()">
                进度跟踪
            </div>
        </div>

        <div class="main-content">
            <div class="content-header">
                <h2>项目总览</h2>
                <p id="userRole">当前用户角色</p>
            </div>

            <div class="search-filters">
                <div class="search-group">
                    <label>根据项目名称等进行搜索</label>
                    <input type="text" id="searchInput" placeholder="搜索项目名称..." onkeyup="filterProjects()">
                </div>
                <div class="search-group">
                    <label>点击后，可以根据进度等进行筛选</label>
                    <select id="progressFilter" onchange="filterProjects()">
                        <option value="">全部进度</option>
                        <option value="0-25">0-25%</option>
                        <option value="26-50">26-50%</option>
                        <option value="51-75">51-75%</option>
                        <option value="76-100">76-100%</option>
                    </select>
                </div>
                <div class="search-group">
                    <label>排序方式</label>
                    <select id="sortSelect" onchange="sortProjects()">
                        <option value="createTime">按创建时间</option>
                        <option value="name">按项目名称</option>
                        <option value="progress">按进度</option>
                    </select>
                </div>
            </div>

            <div class="project-table">
                <div class="table-header">
                    <div class="table-row">
                        <div>项目名称</div>
                        <div>项目负责人</div>
                        <div>项目进度 (%)</div>
                        <div>Git 地址</div>
                    </div>
                </div>
                <div class="table-content" id="projectTableContent">
                    <!-- 项目数据将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <script>
        // 模拟项目数据
        const projects = [
            {
                id: 1,
                name: 'A',
                manager: '张三',
                managerUsername: 'zhangsan',
                progress: 56,
                gitAddress: 'https://github.com/example/project-a',
                createTime: '2024-01-15'
            },
            {
                id: 2,
                name: 'B',
                manager: '李四',
                managerUsername: 'lisi',
                progress: 87,
                gitAddress: 'https://gitee.com/example/project-b',
                createTime: '2024-01-10'
            },
            {
                id: 3,
                name: 'C',
                manager: '王五',
                managerUsername: 'wangwu',
                progress: 98,
                gitAddress: 'https://github.com/example/project-c',
                createTime: '2024-01-05'
            },
            {
                id: 4,
                name: 'D',
                manager: '张三',
                managerUsername: 'zhangsan',
                progress: 23,
                gitAddress: 'https://gitee.com/example/project-d',
                createTime: '2024-01-20'
            },
            {
                id: 5,
                name: 'E',
                manager: '李四',
                managerUsername: 'lisi',
                progress: 45,
                gitAddress: 'https://github.com/example/project-e',
                createTime: '2024-01-12'
            }
        ];

        let currentUser = null;
        let filteredProjects = [...projects];

        // 页面加载时检查登录状态
        window.onload = function() {
            checkLoginStatus();
            displayProjects();
        };

        function checkLoginStatus() {
            const userStr = sessionStorage.getItem('currentUser');
            if (!userStr) {
                alert('请先登录');
                window.location.href = 'login.html';
                return;
            }

            currentUser = JSON.parse(userStr);
            document.getElementById('userInfo').textContent = currentUser.name;
            document.getElementById('userRole').textContent = `当前用户：${currentUser.name} (${currentUser.role === 'minister' ? '部长' : '普通成员'})`;
        }

        function displayProjects() {
            const tableContent = document.getElementById('projectTableContent');
            tableContent.innerHTML = '';

            if (filteredProjects.length === 0) {
                tableContent.innerHTML = '<div class="no-data">没有找到匹配的项目</div>';
                return;
            }

            filteredProjects.forEach(project => {
                const canViewDetails = currentUser.role === 'minister' || 
                                     currentUser.username === project.managerUsername;

                const row = document.createElement('div');
                row.className = 'table-row';
                
                const projectNameClass = canViewDetails ? 'project-name' : 'project-name restricted';
                const projectNameClick = canViewDetails ? `onclick="viewProjectDetails(${project.id})"` : '';
                
                row.innerHTML = `
                    <div class="${projectNameClass}" ${projectNameClick}>
                        ${project.name}
                    </div>
                    <div>${project.manager}</div>
                    <div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: ${project.progress}%"></div>
                        </div>
                        <div class="progress-text">${project.progress}%</div>
                    </div>
                    <div>
                        ${project.gitAddress ? `<a href="${project.gitAddress}" target="_blank" class="git-link">${project.gitAddress}</a>` : '-'}
                    </div>
                `;
                
                tableContent.appendChild(row);
            });
        }

        function filterProjects() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const progressFilter = document.getElementById('progressFilter').value;

            filteredProjects = projects.filter(project => {
                // 搜索过滤
                const matchesSearch = project.name.toLowerCase().includes(searchTerm) ||
                                    project.manager.toLowerCase().includes(searchTerm);

                // 进度过滤
                let matchesProgress = true;
                if (progressFilter) {
                    const [min, max] = progressFilter.split('-').map(Number);
                    matchesProgress = project.progress >= min && project.progress <= max;
                }

                return matchesSearch && matchesProgress;
            });

            displayProjects();
        }

        function sortProjects() {
            const sortBy = document.getElementById('sortSelect').value;
            
            filteredProjects.sort((a, b) => {
                switch (sortBy) {
                    case 'name':
                        return a.name.localeCompare(b.name);
                    case 'progress':
                        return b.progress - a.progress;
                    case 'createTime':
                    default:
                        return new Date(b.createTime) - new Date(a.createTime);
                }
            });

            displayProjects();
        }

        function viewProjectDetails(projectId) {
            if (currentUser.role === 'minister' || 
                currentUser.username === projects.find(p => p.id === projectId)?.managerUsername) {
                alert(`查看项目 ${projectId} 的详细信息`);
                // 这里可以跳转到项目详情页面
            }
        }

        function showProjectOverview() {
            // 当前页面，无需操作
        }

        function showProjectDetails() {
            alert('项目详情功能开发中...');
        }

        function showBasicInfo() {
            alert('基本信息功能开发中...');
        }

        function showDocumentList() {
            alert('文档列表功能开发中...');
        }

        function showMemberInfo() {
            alert('成员信息功能开发中...');
        }

        function showProgressTracking() {
            alert('进度跟踪功能开发中...');
        }

        function logout() {
            sessionStorage.removeItem('currentUser');
            localStorage.removeItem('savedUsername');
            localStorage.removeItem('savedPassword');
            window.location.href = 'login.html';
        }
    </script>
</body>
</html> 